<template>
	<div class="child">
		<template v-for="(item, index) in props.routerList" :key="item.path">
			<el-divider v-if="item.children?.length" content-position="left" style="margin: 10px 0">{{ item.name }}</el-divider>
			<div
				v-else
				class="menu-item"
				:style="[item.children?.length ? '' : `cursor: pointer;background-color:${colorList[index]}`]"
				@click="handleClick(item)"
			>
				<component v-if="!item.meta?.icon?.startsWith('http')" style="width: 1em; height: 1em; margin-right: 8px" :is="iconMap[item.meta?.icon]" />
				<el-image v-else :src="item.meta?.icon" style="width: 1em; height: 1em; margin-right: 8px"></el-image>
				<span>{{ item.name }}</span>
			</div>
			<template v-if="item.children?.length"><MenuItem :routerList="item.children" /> </template>
		</template>
	</div>
</template>
<script lang="ts" setup name="MenuItem">
import { useRouter } from 'vue-router';
import iconMap from '/@/utils/iconMap';
import { colorList } from '../methods';
const router = useRouter();
const props = withDefaults(
	defineProps<{
		routerList: Record<string, any>;
	}>(),
	{ routerList: () => ({}) }
);

const handleClick = (item) => {
	if (item.children?.length) return;
	router.push({
		path: item.path,
	});
};
</script>
<style lang="scss" scoped>
.child {
	display: flex;
	.menu-item {
		margin: 20px 20px;
		margin-left: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
		padding: 20px;
		border-radius: 15px;
		color: #fff;
		&:hover {
			color: #409eff;
			box-shadow: 0px 0px 12px rgba(131, 0, 0, 0.3);
		}
	}
}
</style>
